<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="queryForm"
					:model="queryParams"
					size="small"
					:inline="true"
				>
					<el-form-item label="菜单名称" prop="permissionName">
						<el-input
							v-model="queryParams.permissionName"
							v-symbols
							placeholder="请输入菜单名称"
							clearable
						/>
					</el-form-item>
					<el-form-item label="下发商户" prop="menuType">
						<el-select
							v-model="queryParams.menuType"
							size="medium"
							placeholder="全部"
							clearable
						>
							<el-option
								v-for="item in menuTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所属系统">
						<!-- <el-checkbox
							v-model="queryParams.checked"
						></el-checkbox> -->
						<el-select
							v-model="queryParams.systemType"
							@change="handleQuery"
							size="medium"
							placeholder="全部"
							clearable
						>
							<el-option
								v-for="item in systemTypeList"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							@click="handleQuery"
						>
							查询
						</el-button>
						<el-button icon="el-icon-refresh" @click="resetQuery">
							重置
						</el-button>
						<el-button
							type="primary"
							icon="el-icon-plus"
							@click="handleAdd"
						>
							新增
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					row-key="id"
					:default-expand-all="isExpandAll"
					element-loading-spinner="el-icon-loading"
					border
					:data="menuList"
					style="width: 100%"
					highlight-current-row
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="permissionName"
						label="菜单名称"
						:show-overflow-tooltip="true"
						min-width="160"
					>
						<template slot-scope="{ row }">
							{{ matchName(row.permissionName) }}
						</template>
					</el-table-column>
					<el-table-column
						prop="orderNum"
						label="排序"
						width="60"
					></el-table-column>
					<el-table-column
						prop="menuType"
						label="菜单类型"
						width="160"
					>
						<template slot-scope="{ row }">
							{{ menuTypeList[Number(row.type)] }} 
							<!-- #TODO {{row.id}} -->
						</template>
					</el-table-column>

					<el-table-column
						prop="component"
						label="组件路径"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="{ row }">
							{{ Number(row.type) == 0 ? row.component : '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="giveMerchant"
						label="下发商户"
						width="160"
					>
						<template slot-scope="{ row }">
							{{ giveMerchantList[Number(row.menuType)] }}
						</template>
					</el-table-column>
					<el-table-column prop="perms" label="是否显示">
						<template slot-scope="{ row }">
							{{ visibleTypeList[Number(row.visible)] }}
						</template>
					</el-table-column>
					<el-table-column
						label="创建时间"
						align="center"
						prop="createdAt"
						width="180px"
					></el-table-column>
					<el-table-column
						label="操作"
						align="center"
						class-name="small-padding fixed-width"
						width="280px"
					>
						<template slot-scope="scope">
							<el-button
								v-if="Number(scope.row.type) == 0"
								size="medium"
								type="primary"
								@click="handleAdd(scope.row)"
							>
								添加下级
							</el-button>
							<el-button
								size="medium"
								type="warning"
								@click="handleUpdate(scope.row)"
							>
								编辑
							</el-button>
							<el-button
								size="medium"
								type="danger"
								@click="handleDelete(scope.row)"
							>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 添加或修改菜单对话框 -->
			<el-dialog
				:title="title"
				:visible.sync="open"
				width="750px"
				append-to-body
			>
				<el-form
					ref="form"
					:model="form"
					:rules="rules"
					label-width="130px"
				>
					<el-row>
						<el-col :span="24">
							<el-form-item label="上级菜单" prop="parentId">
								<treeselect
									v-model="form.parentId"
									:options="menuOptions"
									:normalizer="normalizer"
									:show-count="true"
									placeholder="选择上级菜单"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="所属系统" prop="systemType">
								<el-radio-group
									:disabled="true"
									v-model="form.systemType"
								>
									<el-radio :label="1">中控</el-radio>
									<el-radio :label="2">代理</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="菜单类型" prop="type">
								<el-radio-group v-model="form.type">
									<el-radio label="0">菜单</el-radio>
									<el-radio label="1">按钮</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col v-if="form.type !== '1'" :span="24">
							<el-form-item label="菜单图标" prop="icon">
								<el-popover
									placement="bottom-start"
									width="800"
									trigger="click"
									@show="$refs['iconSelect'].reset()"
								>
									<IconSelect
										ref="iconSelect"
										@selected="selected"
									/>
									<el-input
										slot="reference"
										v-model="form.icon"
										v-symbols
										placeholder="点击选择图标"
										readonly
									>
										<svg-icon
											v-if="form.icon"
											slot="prefix"
											:icon-class="form.icon"
											class="el-input__icon"
											style="height: 32px;width: 16px;"
										/>
										<i
											v-else
											slot="prefix"
											class="el-icon-search el-input__icon"
										/>
									</el-input>
								</el-popover>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item
								label="菜单名称"
								prop="permissionName"
							>
								<span slot="label">
									<el-tooltip
										content="菜单名称，如：`menu`，对应国际化字典中的字段"
										placement="top"
									>
										<i class="el-icon-info"></i>
									</el-tooltip>
									菜单名称
								</span>
								<el-input
									v-model="form.permissionName"
									placeholder="请输入菜单名称"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="显示排序" prop="orderNum">
								<el-input-number
									v-model="form.orderNum"
									controls-position="right"
									:min="0"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item prop="idPath">
								<span slot="label">
									<el-tooltip
										content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
										placement="top"
									>
										<i class="el-icon-info"></i>
									</el-tooltip>
									接口路径
								</span>
								<el-input
									v-model.trim="form.idPath"
									placeholder="请输入接口路径"
								/>
							</el-form-item>
						</el-col>
						<el-col v-if="form.type === '0'" :span="24">
							<el-form-item>
								<span slot="label">
									<el-tooltip
										content="访问的组件路径，如：`system/user/index`，默认在`views`目录下 ,如不输入路径，则识别为目录"
										placement="top"
									>
										<i class="el-icon-info"></i>
									</el-tooltip>
									组件路径
								</span>
								<el-input
									v-model.trim="form.component"
									placeholder="请输入组件路径,如不输入路径，则识别为目录"
								/>
							</el-form-item>
						</el-col>
						<!-- <el-col v-if="form.type === '1'" :span="12">
							<el-form-item prop="perms">
								<el-input
									v-model.trim="form.perms"
									placeholder="请输入权限标识"
									maxlength="100"
								/>
								<span slot="label">
									<el-tooltip
										content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
										placement="top"
									>
										<i class="el-icon-info"></i>
									</el-tooltip>
									权限字符
								</span>
							</el-form-item>
						</el-col> -->
						<el-col v-if="form.type === '0'" :span="12">
							<el-form-item prop="isCache">
								<span slot="label">
									<el-tooltip
										content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致"
										placement="top"
									>
										<i class="el-icon-info"></i>
									</el-tooltip>
									是否缓存
								</span>
								<el-radio-group v-model="form.isCache">
									<el-radio :label="1">缓存</el-radio>
									<el-radio :label="0">不缓存</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col v-if="form.type === '0'" :span="12">
							<el-form-item prop="visible">
								<span slot="label">
									<el-tooltip
										content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问"
										placement="top"
									>
										<i class="el-icon-info"></i>
									</el-tooltip>
									显示状态
								</span>
								<el-radio-group v-model="form.visible">
									<el-radio :label="1">显示</el-radio>
									<el-radio :label="0">隐藏</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="下发商户" prop="menuType">
								<el-radio-group v-model="form.menuType">
									<el-radio :label="1">是</el-radio>
									<el-radio :label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<!-- <el-col v-if="form.menuType !== '3'" :span="12">
							<el-form-item prop="status">
								<span slot="label">
									<el-tooltip
										content="选择停用则路由将不会出现在侧边栏，也不能被访问"
										placement="top"
									>
										<i class="el-icon-info"></i>
									</el-tooltip>
									菜单状态
								</span>
								<el-radio-group v-model="form.status">
									<el-radio label="1">正常</el-radio>
									<el-radio label="0">停用</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col> -->
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitForm">
						确 定
					</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import {
	queryMenuListApi,
	delMenuApi,
	addMenuApi,
	updateMenuApi
} from '@/api/system/menu'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { handleTree } from '@/utils/tree'
import IconSelect from '@/components/IconSelect'
import list from '@/mixins/list'
import { filterEmptyParams } from '@/utils'
export default {
	name: 'MenuManage',
	components: { Treeselect, IconSelect },
	mixins: [list],
	data() {
		return {
			// 遮罩层
			loading: false,
			// 菜单表格树数据
			menuList: [],
			// 菜单树选项
			menuOptions: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 是否展开，默认全部折叠
			isExpandAll: false,
			// 重新渲染表格状态
			refreshTable: true,
			// 查询参数
			queryParams: {
				permissionName: undefined,
				menuType: undefined,
				systemType: 1,
				permissionDisplay: 1
			},
			systemTypeList: [
				{
					code: 1,
					description: '中控'
				},
				{
					code: 2,
					description: '代理'
				}
			],
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				permissionName: [
					{
						required: true,
						message: '菜单名称不能为空',
						trigger: 'blur'
					}
				],
				orderNum: [
					{
						required: true,
						message: '菜单顺序不能为空',
						trigger: 'blur'
					}
				],
				// path: [
				// 	{ required: true, message: '路由地址不能为空', trigger: 'blur' }
				// ],
				component: [
					{
						required: true,
						message: '组件路径不能为空',
						trigger: 'blur'
					}
				],
				type: [
					{
						required: true,
						message: '菜单类型不能为空',
						trigger: 'blur'
					}
				],
				systemType: [
					{
						required: true,
						message: '所属系统不能为空',
						trigger: 'blur'
					}
				]
			},
			menuTypeList: {
				0: '菜单',
				1: '按钮',
				2: '其它',
				3: '子按钮'
			},
			giveMerchantList: {
				0: '否',
				1: '是'
			},
			visibleTypeList: {
				0: '否',
				1: '是'
			},
			menuTypeArr: [
				{ code: 0, description: '否' },
				{ code: 1, description: '是' }
			]
		}
	},
	created() {
		this.getList()
	},
	methods: {
		// 选择图标
		selected(name) {
			this.form.icon = name
		},
		/** 查询菜单列表 */
		getList() {
			this.loading = true

			queryMenuListApi(filterEmptyParams(this.queryParams))
				.then((res) => {
					if (res?.code === 200) {
						this.menuList = handleTree(res.data, 'id')
					}
					this.loading = false
				})
				.catch((err) => {
					console.log(err)
				})
		},
		matchName(name) {
			return name.includes('/')
				? name
						.split('/')
						.map((name) => (this.$te(name) ? this.$t(name) : name))
						.join('/')
				: name
						.split('-')
						.map((name) => (this.$te(name) ? this.$t(name) : name))
						.join('-')
		},
		/** 转换菜单数据结构 */
		normalizer(node) {
			if (node.children && !node.children.length) {
				delete node.children
			}
			return {
				id: node.id,
				label: this.$te(node.permissionName)
					? this.$t(node.permissionName)
					: node.permissionName,
				children: node.children
			}
		},
		/** 查询菜单下拉树结构 */
		getTreeselect() {
			queryMenuListApi({
				permissionDisplay: 1,
				systemType: this.queryParams.systemType
			}).then((res) => {
				if (res?.code === 200) {
					this.menuOptions = []
					const menu = {
						id: 0,
						permissionName: '主目录',
						children: []
					}
					menu.children = handleTree(res.data, 'id')
					this.menuOptions.push(menu)
				}
			})
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				parentId: 0,
				permissionName: undefined,
				icon: undefined,
				menuType: 1,
				type: '0',
				systemType: this.queryParams.systemType,
				orderNum: undefined,
				path: undefined,
				isCache: 1,
				visible: 1
			}
			// this.$refs.form.resetFields()
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.queryForm.resetFields()
			this.handleQuery()
		},
		/** 新增按钮操作 */
		handleAdd(row) {
			this.reset()
			this.getTreeselect()
			if (row !== null && row.id) {
				this.form.parentId = row.id
			} else {
				this.form.parentId = 0
			}
			this.open = true
			this.title = '添加菜单'
		},
		/** 展开/折叠操作 */
		toggleExpandAll() {
			this.refreshTable = false
			this.isExpandAll = !this.isExpandAll
			this.$nextTick(() => {
				this.refreshTable = true
			})
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset()
			this.getTreeselect()

			this.form = Object.assign({}, row)
			this.form.systemType = this.queryParams.systemType
			this.form.children = []
			this.open = true
			this.title = '修改菜单'
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id !== undefined) {
						updateMenuApi(this.form).then((response) => {
							this.$message({
								message: '修改成功',
								type: 'success'
							})
							this.open = false
							this.getList()
						})
					} else {
						addMenuApi(this.form).then((response) => {
							this.$message({
								message: '新增成功',
								type: 'success'
							})
							this.open = false
							this.getList()
						})
					}
				}
			})
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			this.$confirm(
				'是否确认删除名称为"' + row.permissionName + '"的数据项？',
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				}
			)
				.then(() => {
					return delMenuApi({ id: row.id })
				})
				.then(() => {
					this.getList()
					this.$message({
						message: '删除成功',
						type: 'success'
					})
				})
				.catch(() => {})
		}
	}
}
</script>
